<template>
  <div class="box">
    <div class="my-row header">
      <NavBar />
      <AlertBlock :errorPrompt="errorPrompt" />
      <StateFilters />
      <KeepAlive />
    </div>
    <div class="my-row content">
      <router-view class="room" />
    </div>
    <div class="my-row footer">
      <Footer v-bind:links="links" class="room"></Footer>
      <pre v-if="devmode">
        <!-- TODO: remove devmode and sdState from med-fe -->
        {{ sdState }}</pre>
    </div>
  </div>
</template>

<script>
import AlertBlock from "@/components/AlertBlock.vue";
import Footer from "@/components/Footer.vue";
import KeepAlive from "@/components/KeepAlive.vue";
import NavBar from "@/components/NavBar.vue";
import StateFilters from "@/components/StateFilters.vue";
import { mapGetters } from "vuex";

export default {
  name: "App",
  components: {
    AlertBlock,
    Footer,
    NavBar,
    KeepAlive,
    StateFilters
  },
  computed: {
    browserPasses: function() {
      return "fetch" in window;
    },
    ...mapGetters(["sdState", "devmode", "errorPrompt", "links"])
  }
};
</script>

<style>
:root {
  --brand-colour: #eeeeee;
}
html,
body {
  height: 100%;
  margin: 0;
}
.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.box .my-row .room {
  padding: 2px 10px;
}
.box .my-row.header {
  flex: 0 1 auto;
}
.box .my-row.content {
  flex: 1 1 auto;
}
.box .my-row.footer {
  flex: 0 1 40px;
}
</style>
